<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定时器应用</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #box1{
            width: 100px;
            height: 100px;
            background-color: #bfa;
            position: absolute;
            left: 0;
        }
        #box3{
            width: 100px;
            height: 100px;
            background-color: yellow;
            position: absolute;
            left: 0;
            top: 200px;
        }
        #box2{
            width: 0;
            height: 1000px;
            border-left:1px black solid;
            position: absolute;
            left: 600px;
            top: 0;
        }
    </style>
    <script src="../tools.js"></script><!--引入写好的js文件-->
    <script>
        window.onload=function () {
            var box1=document.getElementById("box1");
            var btn01=document.getElementById("btn01");
            var btn02=document.getElementById("btn02");
            // var timer;
            btn01.onclick=function () {
                move(box1,"left",600,10);
            };
            btn02.onclick=function () {
                move(box1,"left",0,10);
            };

            var bnt03=document.getElementById("btn03");
            btn03.onclick=function () {
                move(box3,"left",600,10)
            };
            var btn04=document.getElementById("btn04");
            btn04.onclick=function () {
                move(box3,"left",0,10)
            };
            var btn05=document.getElementById("btn05");
            btn05.onclick=function () {
                // move(box3,"top",600,10);
                // move(box3,"height",600,10);
                move(box3,"width",600,10,function () {
                    move(box3,"height",300,10,function () {
                        move(box3,"top",200,10,function () {
                            move(box3,"width",100,10,function () {
                                move(box3,"height",100,10,function () {

                                });
                            });
                        });
                    });
                });
            };
        };

    </script>
</head>
<body>
<button id="btn01">1.向右移动</button>
<button id="btn02">1.向左移动</button>
<button id="btn03">2.向右移动</button>
<button id="btn04">2.向左移动</button>
<button id="btn05">3.向右移动</button>
<br />
<br />
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
</body>
</html>